<template>
	<view class="content">
		<view class="dingbu">
			<view class="status_bar">
			 </view>
			<uni-nav-bar title="我的" background-color="#1578F2" ></uni-nav-bar>
			<view class="mine_top">
				<view class="mine_pic">
					<image src="../../static/moren.png" mode=""  v-if="info.avatar ==''"></image>
					<image :src="info.avatar" mode="" v-else></image>
				</view>
				<view class="mine_user" @click="xinxi()">
					<view class="mine_title">{{info.nickname}}</view>
					<view class="mine_vip">
						<text class="vip iconfont icon-huiyuan3"></text>
						<text v-if="info.user_level ==0 ">普通用户</text>
						<text v-if="info.user_level ==1 ">月卡会员</text>
						<text v-if="info.user_level ==2 ">季卡会员</text>
						<text v-if="info.user_level ==3 ">年卡会员</text>
						<text v-if="info.user_level ==4 ">终身会员</text>
					</view>
					<view class="mine_id">ID:{{info.id}}<text style="margin-left: 50rpx; margin-top: 10rpx;">编辑资料</text></view>
					
				</view>
			</view>
		</view>
		<view class="mine" >
			
			<view class="mine_btm">
				<view class="mine_item" @click="vip()">
					<view class="mine-l">
						<image src="../../static/my1.png" mode=""></image>
					</view>
					<view class="mine-c">会员升级</view>
						<text  class="mine-r iconfont icon-fenye-xiayiye "></text>
				</view>
				<view class="mine_item" @click="money()">
					<view class="mine-l">
						<image src="../../static/my2.png" mode=""></image>
					</view>
					<view class="mine-c">充值中心</view>
						<text  class="mine-r iconfont icon-fenye-xiayiye "></text>
				</view>
				<!-- <view class="mine_item" @click="team()">
					<view class="mine-l">
						<image src="../../static/my3.png" mode=""></image>
					</view>
					<view class="mine-c">我的团队</view>
						<text  class="mine-r iconfont icon-fenye-xiayiye "></text>
				</view> -->
				<!-- <view class="mine_item" @click="xinxi()">
					<view class="mine-l">
						<image src="../../static/my4.png" mode=""></image>
					</view>
					<view class="mine-c">编辑资料</view>
						<text  class="mine-r iconfont icon-fenye-xiayiye "></text>
				</view> -->
				<!-- <view class="mine_item" @click="liwu()">
					<view class="mine-l">
						<image src="../../static/my9.png" mode=""></image>
					</view>
					<view class="mine-c">礼物列表</view>
						<text  class="mine-r iconfont icon-fenye-xiayiye "></text>
				</view> -->
				<view class="mine_item" @click="idea()">
					<view class="mine-l">
						<image src="../../static/my5.png" mode=""></image>
					</view>
					<view class="mine-c">意见反馈</view>
						<text  class="mine-r iconfont icon-fenye-xiayiye "></text>
				</view>
				<view class="mine_item" @click="help()">
					<view class="mine-l">
						<image src="../../static/my6.png" mode=""></image>
					</view>
					<view class="mine-c">帮助中心</view>
						<text  class="mine-r iconfont icon-fenye-xiayiye "></text>
				</view>
				<view class="mine_item" @click="spread()">
					<view class="mine-l">
						<image src="../../static/my7.png" mode=""></image>
					</view>
					<view class="mine-c">我要推广</view>
						<text  class="mine-r iconfont icon-fenye-xiayiye "></text>
				</view>
				<!-- <view class="mine_item" @click="open()">
					<view class="mine-l">
						<image src="../../static/my8.png" mode=""></image>
					</view>
					<view class="mine-c">平台客服</view>
						<text  class="mine-r iconfont icon-fenye-xiayiye "></text>
				</view> -->
			</view>
			<view class="exit" @click="exit()">退出登录</view>
		</view>
		
			<!-- 弹窗 -->
			<!-- <view class="mask_bg" v-if="active == 1" @touchmove.stop.prevent>
				<view class="mask">
					<view class="mask_pic">
						<image src="../../static/kefu.png" mode=""></image>
					</view>
					<view class="mask_btm">
						<view class="kefu">客服微信</view>
						<view class="kefu_num">
							<image src="../../static/wechat.png" mode=""></image>
							<view class="wx_num">{{wx}}</view>
						</view>
						<view class="kefu_copy" @click="copy(wx)">一键复制</view>
						<view class="kefu_close" @click="close()">关闭</view>
					</view>
				</view>
			</view> -->
			
			<!-- 弹窗 -->
			<view class="mask_bg" v-if="active1 == 1" @touchmove.stop.prevent>
				<view class="mask1">
					<view class="out">提示</view>
					<view class="out out1">您确定要退出登录？</view>
					<view class="kefu_copy" @click="closeexit()">我再想想</view>
					<view class="kefu_close" @click="out()">确认退出</view>
				</view>
			</view>
	</view>
</template>

<script>
import getdata from '@/common/ajax.js';	
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {	
		components: {uniNavBar},
		data() {
			return {
				active:0,
				active1:0,
				wx:'',
				info:''
			}
		},
		onLoad() {
			
			// this.userinfo()	
			// this.kefuwx()	
		},
		onShow(){
			this.userinfo()
		},
		methods: {
			// kefuwx(){
			// 	//客服微信
			// 	var _this = this
			// 	var token = uni.getStorageSync('token')
			// 	uni.request({
			// 		url: getdata.websiteUrl + '/index/wx',
			// 		header:{'content-type': "application/x-www-form-urlencoded",token:token},
			// 		dataType: 'json',
			// 		method: 'POST',
			// 		success: res => {
			// 			// console.log(res)
			// 			if(res.data.code == 1){
			// 				_this.wx = res.data.data
			// 			}else{
			// 				getdata.shou(res.data.msg)
			// 			}
			// 		},
			// 		fail: res => {
			// 			getdata.shou('服务器断开链接')
			// 		}
			// 	});
			// },
			userinfo(){
				//获取用户信息
				uni.showLoading({
				    title: '加载中'
				});
				var _this = this
				var token = uni.getStorageSync('token')
				uni.request({
					url: getdata.websiteUrl + '/user/getUserInfo',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						console.log(res)
						uni.hideLoading();
						if(res.data.code == 1){
							_this.info = res.data.data
							uni.setStorageSync('gender1', res.data.data.gender);
						}else if(res.data.code == 401){
							getdata.shou('请登录') 
							uni.reLaunch({
							    url: '../login/login'
							});
						}else{
							getdata.shou(res.data.msg)
						}
						
					},
					fail: res => {
						uni.hideLoading();
						getdata.shou('服务器断开链接')
					}
				});
			},
			exit(){
				//退出登录的遮罩
				this.active1 = 1
			},
			closeexit(){
				//退出登录的遮罩
				this.active1 = 0
			},
			out(){
				//退出登录
				uni.showLoading({
				    title: '退出登录中'
				});
				var _this = this
				var token = uni.getStorageSync('token')
				uni.request({
					url: getdata.websiteUrl + '/user/getUserInfo',
					header:{'content-type': "application/x-www-form-urlencoded",token:token},
					dataType: 'json',
					method: 'POST',
					success: res => {
						if(res.data.code == 1){
							uni.hideLoading({
								title:'退出登录成功'
							});
							uni.reLaunch({
							    url: '../login/login'
							});
							_this.active1 = 0
							uni.clearStorage();
						}else{
							getdata.shou(res.data.msg)
						}
						
					},
					fail: res => {
						getdata.shou('服务器断开链接')
					}
				});
				
			},
			copy(wx){
				//复制微信
			  uni.setClipboardData({
			   data: this.wx,
			   success: function () {
				   console.log('success');
			   }
			  });
			},
			open(){
				this.active = 1
			},
			close(){
				this.active = 0
			},
			vip(){
				uni.navigateTo({
				    url: 'vip/vip'
				});
			},
			xinxi(){
				uni.navigateTo({
				    url: 'userinfo/userinfo'
				});
			},
			money(){
				uni.navigateTo({
				    url: 'money/money'
				});
			},
			team(){
				uni.navigateTo({
				    url: 'team/team'
				});
			},
			watchlist(){
				uni.navigateTo({
				    url: 'watchlist/watchlist'
				});
			},
			idea(){
				uni.navigateTo({
				    url: 'idea/idea'
				});
			},
			spread(){
				uni.navigateTo({
				    url: 'spread/spread'
				});
			},
			liwu(){
				uni.navigateTo({
				    url: 'liwu/liwu'
				});
			},
			help(){
				uni.navigateTo({
				    url: 'help/help'
				});
			}
		}
	}
</script>

<style lang="scss">
@import '../../static/iconfont/iconfont.css';	
.dingbu{
	position: fixed;
	left:0;
	top:0;
	// position: sticky;
	// width: 100%;
	// left: 0;
	// right: 0;
	z-index: 999;
}
.status_bar {
        height: var(--status-bar-height);
        width: 100%;
		background-color: #1578F2;
		
    }		
.uni-navbar--border{
	border: none !important;
}	

.uni-nav-bar-text{
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #FFFFFF !important;
}	
.mine_top{
		width: 100%;
		height: 280rpx;
		background: url(../../static/minebg.png) no-repeat;
		background-size:100% 100%;
		display: flex;
		// padding-top: 10rpx;
		.mine_pic{
			width: 152rpx;
			height: 152rpx;
			border-radius: 10rpx;
			margin-left: 30rpx;
			image{
				width: 152rpx;
				height: 152rpx;
				border-radius: 10rpx;

			}
		}
		.mine_user{
			margin-left: 65rpx;
			margin-top: 5rpx;
			height: 152rpx;
			.mine_title{
				font-size: 30rpx;
				line-height: 1;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 20rpx;
			}
			.mine_vip{
				font-size: 24rpx;
				line-height: 1;
				font-family: PingFang SC;
				color: #FFFFFF;
				margin-bottom: 30rpx;
				.vip{
				font-size: 26rpx;	
				margin-right: 20rpx;
				}
			}
			.mine_id{
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
			}
		}
	}
.mine{
	margin-top: calc(var(--status-bar-height) + 370rpx);
	.mine_btm{
		width: 100%;
		box-sizing: border-box;
		padding-left:30rpx ;
		padding-right:40rpx ;
		margin-top: 40rpx;
		margin-bottom: 100rpx;
		.mine_item{
			width: 100%;
			height: 105rpx;
			border-bottom: 2rpx solid #DDDDDD;
			display: flex;
			align-items: center;
			.mine-l{
				image{
					width: 40rpx;
					height: 36rpx;

				}
			}
			.mine-c{
				font-size: 26rpx;
				font-family: PingFang SC;
				color: #333333;
				margin-left: 26rpx;
			}
			.mine-r{
				margin-left: auto;
				font-size: 30rpx;
				color:#DDDDDD;
			}
		}
	}
	.exit{
		width: 300rpx;
		height: 89rpx;
		line-height: 89rpx;
		border: 2rpx solid #1578F2;
		border-radius: 45rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1578F2;
		text-align: center;
		margin: 0 auto 100rpx;
		
	}
}
.mask_bg{
	z-index: 999;
	width: 100vw;
	height: 100vh;
	position: fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
    background: rgba(0, 0, 0, 0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	.mask{ 
		width: 624rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.mask_pic{
			width: 624rpx;
			height: 232rpx;
			border-radius: 20rpx 20rpx 0 0;
			image{
				width: 624rpx;
				height: 232rpx;
				border-radius: 20rpx 20rpx 0 0;
			}
		}
		.mask_btm{
			width: 624rpx;
			height: 416rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.kefu{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-top: 50rpx;
				margin-left: 44rpx;
			}
			.kefu_num{
				margin: 36rpx auto 0;
				display: flex;
				justify-content: center;
				image{
					width: 42rpx;
					height: 42rpx;

				}
				.wx_num{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #F2154E;
					margin-left: 18rpx;
				}
			}
			.kefu_copy{
				width: 300rpx;
				height: 90rpx;
				line-height: 90rpx;
				background: #1578F2;
				border-radius: 45rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #FFFFFF;
				text-align: center;
				margin: 70rpx auto 0;
			}
			.kefu_close{
				width: 300rpx;
				height: 90rpx;
				line-height: 90rpx;
				background: #fff;
				border-radius: 45rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #1578F2;
				text-align: center;
				margin: 10rpx auto 0;
			}
		}
	}
}
.mask1{
	width: 624rpx;
	height: 400rpx;
	background: #FFFFFF;
	border-radius: 40rpx;
	.out{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
		padding-top: 25rpx;
	}
	.out1{
		padding-top: 70rpx;
	}
	.kefu_copy{
		width: 300rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #1578F2;
		border-radius: 45rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #FFFFFF;
		text-align: center;
		margin: 60rpx auto 0;
	}
	.kefu_close{
		width: 300rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #fff;
		border-radius: 45rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		color: #1578F2;
		text-align: center;
		margin: 0 auto ;
	}
}
</style>
